<template>
  <div class="hot-industry">
    <div class="industry-list">
      <template v-for="item in hotIndustryData" :key="item.id">
        <IndustryItem :item="item" :isShowFollow="false"></IndustryItem>
      </template>
    </div>
  </div>
</template>
<script setup>
import hotIndustryData from '@/utils/hotIndustry.json';
import IndustryItem from '@/views/industryMap/industryHome/components/IndustryItem.vue';
</script>
<style lang="scss" scoped>
.hot-industry {
  height: 100%;
  padding: 0 60px 32px;
}
.industry-list {
  height: 100%;
  padding: 52px 57px;
  background: #eff9ff;
  border-radius: 38px;
  overflow: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 32px 22px;
  box-sizing: border-box;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
